<template>
  <el-carousel height="60rem" indicator-position="none" arrow="never" :autoplay="false" v-show="show">
    <el-carousel-item>
      <el-image class="imgbg-container" :src="bannerList.realFileUrl" :style="`background: center center/cover no-repeat`">
      </el-image>
    </el-carousel-item>
  </el-carousel>
</template>
<script>
import {inject, reactive, ref, toRefs} from 'vue'
import FrontApi from '@/api/front'

export default {
  name: 'banner',
  setup() {
    var data = reactive({
      bannerList: []
    })
    const currentComponent = inject('curComponent')
    const show = inject('show')
    const type = ref(currentComponent.value === 'SolutionTab' ? 2 : 1)

    FrontApi.getBannerList(type.value).then(res => {
      if (res.code === 200) {
        data.bannerList = res.data[0]
      }
    })

    return {
      ...toRefs(data),
      show,
      currentComponent
    }
  },
}
</script>
<style scoped>
.imgbg-container {
  height: 100%;
  width: 100%;
}

.download-container {
  background: rgba(32, 32, 32, 0.8);
  width: 22.29%;
  height: 50.56%;
  position: absolute;
  left: 12.5%;
  top: 22.85%;
}

.text-img-container {
  height: 35.99%;
  position: absolute;
  left: 8.57%;
  right: 8.57%;
  top: 10.16%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text-img-megmeet {
  width: 54.89%;
}

.slogan {
  font-size: 2.2rem;
  color: #ffffff;
}

.download-btn {
  position: absolute;
  left: 8.57%;
  bottom: 10.16%;
}
</style>
